import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useState } from 'react';
import ScrollBar from 'components/ScrollBar'
import Switch from 'components/Switch'


export default function Index() {
  const [active, setActive] = useState(false)
  const [arr, setArr] = useState<any[]>([1])

  const onChange = (number: number) => {  
    var _arr = Object.keys(Array.from({ length: number }));  
    setArr(_arr)
  }
  
  return (
    <View className={s.wrapper}>
      <View className={s.container}>
        <ScrollBar title='列表数' className={s.width} maxNum={5} text_color={'#fff'} onChange={onChange}/>
        <View className={active ? `${s.playground} ${s.active}` : s.playground}>
          <View className={active ? `${s.shadow} ${s.active}` : s.shadow}>
            <View className={s.line}>
              {arr.map((item, index) => (
                <View className={index === arr.length - 1 ? s.fill_box : `${s.fill_box} ${s.border}`}>
                  <View className={s.fill}></View>
                </View>
              ))}
            </View>
          </View>
          <View className={active ? `${s.list_box} ${s.active}` : s.list_box}>
            {arr.map(() => (
              <View className={s.list}>
                <View className={s.tab}>{'<text>'}</View>
              </View>
            ))}
          </View>
        </View>
        <Switch text='展示' state={active} onClick={() => setActive(!active)} />
      </View>
    </View> 
  )
}
